<!-- 头像 -->
<script setup lang="ts">
import { useScreenStore } from '@/hooks/useScreen';
import { useUserStore } from '@/stores';

const userStore = useUserStore();
const { isMobile } = useScreenStore();

const src = computed(
  () => userStore.userInfo?.avatar ?? 'https://avatars.githubusercontent.com/u/76239030',
);

// 点击头像跳转到指定页面
function handleAvatarClick() {
  const currentUserId = userStore.userInfo?.id;
  if (!currentUserId)
    return;

  // 根据设备类型跳转到不同页面
  let url;
  if (isMobile.value) {
    // 手机版
    url = `https://www.xqnmz.com/home.php?mod=space&uid=${currentUserId}&do=profile&mycenter=1&mobile=2`;
  }
  else {
    // 电脑版
    url = `https://www.xqnmz.com/home.php?mod=spacecp&ac=credit&showcredit=1`;
  }

  window.open(url, '_blank');
}
</script>

<template>
  <div class="avatar-container">
    <el-avatar
      :src="src"
      :size="28"
      fit="fit"
      shape="circle"
      class="cursor-pointer"
      @click="handleAvatarClick"
    />
  </div>
</template>

<style scoped lang="scss">
.avatar-container {
  .cursor-pointer {
    cursor: pointer;
  }
}
</style>
